<template>
  <view>
    <xh-title-bar title="首页" hideBack />
    <uni-notice-bar
      showIcon
      single
      scrollable
      text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"
    ></uni-notice-bar>
    <view class="content">
      <uni-card title="采购管理" padding="0">
        <view class="card-content">
          <view
            @click="onClickItem(item.url)"
            v-for="item in purchaseMenuList"
            class="tag-item"
            inverted
            :key="item.text"
            >{{ item.text }}</view
          >
        </view>
      </uni-card>
      <uni-card title="检验管理" padding="0">
        <view class="card-content">
          <view
            @click="onClickItem(item.url)"
            v-for="item in inspectionMenuList"
            class="tag-item"
            inverted
            :key="item.text"
            >{{ item.text }}</view
          >
        </view>
      </uni-card>
      <uni-list :border="true">
        <uni-list>
          <uni-list-chat
            :avatar="avatar"
            v-for="(item, index) in flowInfoList"
            :key="index"
            :title="item.moduleType"
            :note="item.note"
            badge-positon="right"
            :badge-text="item.total"
            @click="onClickItem(item.url)"
            link
          >
          </uni-list-chat>
        </uni-list>
      </uni-list>
    </view>
  </view>
</template>

<script>
import { mapActions } from "vuex";
import { getRoleMenuTreeselect } from "../api/system/user";
import { getFlowInfo } from "../api/purchase/bottleInspect";
// import { getTwoLayersMenuList } from '@/utils/business';
import AppStorage from "../utils/appStorage";
export default {
  name: "pageIndex",
  data() {
    return {
      avatar:
        "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
      allPurchaseMenuList: [
        {
          text: "面料入库",
          url: "/subPurchaseManage/fabricStorage/index",
          code: 1105,
        },
        {
          text: "面料出库",
          url: "/subPurchaseManage/fabricDelivery/index",
          code: 1107,
        },
        {
          text: "绣花申请",
          url: "/subProductionManage/embroideryApply/index",
          code: 1108,
        },
        {
          text: "绣花收回",
          url: "/subProductionManage/embroideryWithdraw/index",
          code: 1109,
        },
		{
		  text: "裁剪铺布",
		  url: "/subProductionManage/cuttingLayingFabric/index",
		  code: 1115,
		},
      ],
      purchaseMenuList: [],
      flowInfoList: [],
      inspectionMenuList: [
        {
          text: "吊瓶检验",
          url: "/subPurchaseManage/bottleInspect/index",
          code: 1112,
        },
        {
          text: "验货记录",
          url: "/subProductionManage/inspectionRecords/index",
          code: 1113,
        },
      ],
    };
  },
  methods: {
    ...mapActions(["FetchProductList", "FetchMobileInbound"]),
    onClickItem(url) {
      if (url) {
        this.$nav.navigateTo(url);
      } else {
        this.$modal.showToast("模块建设中~");
      }
    },
    fetchMenuList() {
      const { roleIds } = AppStorage.get("userInfo");
      getRoleMenuTreeselect((roleIds || []).join(",")).then((res) => {
        const { checkedKeys } = res;
        if (checkedKeys.length === 0) {
          this.purchaseMenuList = this.allPurchaseMenuList;
        } else {
          this.purchaseMenuList = this.allPurchaseMenuList.filter((item) =>
            checkedKeys.includes(item.code)
          );
        }
      });
    },
    fetchFlowInfoList() {
      getFlowInfo().then((res) => {
        // 使用 filter 和 map 方法合成一个集合
        this.flowInfoList = res.rows.map((item2) => {
          const foundItem = this.inspectionMenuList.find(
            (item1) => item1.text === item2.moduleType
          );
          return foundItem ? { ...item2, url: foundItem.url } : item2;
        });
      });
    },
  },
  created() {
    this.FetchProductList();
    this.FetchMobileInbound();
    this.fetchMenuList();
    this.fetchFlowInfoList();
  },
  onLoad: function () {},
};
</script>

<style scoped lang="scss">
.content {
  .card-content {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    justify-content: space-between;
    .tag-item {
      border: 1px solid #999;
      border-radius: 4px;
      font-size: 17px;
      padding: 10px;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.3);
    }
  }
}

.chat-custom-right {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.chat-custom-text {
  font-size: 15px;
  color: #999;
}
</style>
